<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
  <meta name="viewport"
    content="width=device-width,initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-touch-fullscreen" content="yes">
  <meta name="format-detection" content="telephone=no">
  <title>大师列表</title>
  <!--[if lt IE 9]>  
        <script src="http://cdn.bootcss.com/html5shiv/r29/html5.js"></script>
        <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>    
    <![endif]-->
  <script src="__PUBLIC__/js/rem.js"></script>
  <script src="__PUBLIC__/js/jquery.min.js"></script>
  <script src="__PUBLIC__/js/layer/layer.js"></script>
  <style>
    body{
      margin: 0;
    }
    .commonflex{
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .commonflex .t{
      flex:none;
      width: 2rem;
    }
    .commonflex .s{
      flex: auto;
      min-width: 3.3rem;
      margin: 0 .2rem;
    }
    .commonflex .p{
      flex:none;
      width: 1.8rem;
    }
    .commonflex>div{
      text-align: center;
    }
    /* <div class="title-wrap commonflex">
    <div class="dashi-tlt t">老师</div>
    <div class="s">服务</div>
    <div class="p">价格</div>
  </div> */
    .title-wrap{
      height: 0.6rem;
      line-height: 0.6rem;
      font-size: .3rem;
      padding: .2rem;
      box-sizing: border-box;
      color: #333;
      border-bottom: .01rem solid #ccc;
    }
    .avatar-wrap{
      min-height: 1.5rem;
      position: relative;
      
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;

    }
    .avatar-wrap .avatar{
      display: block;
      background-color: #eee;
      width: 1.5rem;
      height: 1.5rem;
      border-radius: .15rem;
    }
    .avatar-wrap .name{
      width: 1.5rem;
      position: absolute;
      left: 0;
      bottom: 0;
      border-radius:0 0 .15rem .15rem  ;
      background-color:rgba(0,0,0,.5);
      height: 0.4rem;
      margin: 0 .25rem;
      text-align: center;
      line-height: 0.4rem;
      font-size: .24rem;
      color: #fff;
    }
    .avatar-wrap .ornament{
      width: .5rem;
      height: 0.5rem;
      position: absolute;
      right: 0.1rem;
      top: -0.1rem;
      /* background-color:rgba(0,0,0,.5); */
    }
    /* <div class="s desc-wrap">
      <div class="desc">中华易经联盟协会主经联盟协会主经联盟协会主席</div>
      <div class="desc">中华易经联盟协会主席</div>
      <div class="desc">中华易经联盟协会主席</div>
      <div class="num">(日限额10名)</div>
    </div> */
    .dashi-list{
      padding: .3rem .2rem;
      box-sizing: border-box;
    }
    .desc-wrap .desc{
      max-width: 3.3rem;
      font-size: .24rem;
      line-height: 0.4rem;
      color: #333;
      overflow:hidden; 
      text-overflow:ellipsis;
      white-space:nowrap; 
    }
    .desc-wrap .num{
      font-size: .28rem;
      color: #9A0504;
      line-height: 0.4rem;
    }
    .price-wrap{

    }
    .price-wrap .now-price{
      color: #9A0504;
      line-height: .5rem;
      font-size: .28rem;
    }
    .price-wrap .old-price{
      line-height: .5rem;
      text-decoration: line-through;
      font-size: .28rem;
      color: #999;
    }
    .price-wrap .btn{
      border-radius: .1rem;
      height: 0.5rem;
      line-height: 0.5rem;
      text-align: center;
      color: #fff;
      margin: 0 auto;
      width: 1.2rem;
      font-size: .24rem;
      background-color: #9A0504;
    }

    .dashi-list:nth-child(2n){
      background-color: #fff;
    }
    .dashi-list:nth-child(2n+1){
      background-color: #FCF7F3;
    }
  </style>
</head>

<body>
  <div class="title-wrap commonflex">
    <div class="dashi-tlt t">老师</div>
    <div class="s">服务</div>
    <div class="p">价格</div>
  </div>
  <!-- 循环块、 -->
  <div class="commonflex dashi-list dashi-key-0">
    <div class="t avatar-wrap">
      <img src="__PUBLIC__/images/bbqm_img/v5/cca.png" alt="" class="avatar">
      <img src="__PUBLIC__/images/bbqm_img/v5/tj.png" alt="" class="ornament">
      <!-- <div class="name">哈哈哈</div> -->
    </div>
    <div class="s desc-wrap">
      <div class="desc">著名国学起名大师</div>
      <div class="desc">华侨大学总裁班特聘教授</div>
      <div class="num">(日限额10名)</div>
    </div>
    <div class="price-wrap p">
      <div class="now-price">￥588</div>
      <div class="old-price">￥680</div>
      <div class="btn btn-0">邀请老师</div>
    </div>
  </div>

  <div class="commonflex dashi-list dashi-key-1">
    <div class="t avatar-wrap">
      <img src="__PUBLIC__/images/bbqm_img/v5/cyz.png" alt="" class="avatar">
      <!--<img src="" alt="" class="ornament">-->
      <!--<div class="name">哈哈哈</div>-->
    </div>
    <div class="s desc-wrap">
      <div class="desc">著名国学起名大师</div>
      <div class="desc">港台明星命理御用顾问</div>
        <div class="desc">铁板神数玄学专家</div>
      <div class="num">(日限额10名)</div>
    </div>
    <div class="price-wrap p">
      <div class="now-price">￥388</div>
      <div class="old-price">￥680</div>
      <div class="btn btn-1">邀请老师</div>
    </div>
  </div>

  <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
  <script>
    $(".btn").on('click',function(e){
      var dashiId = e.currentTarget.className.match(/\d+/)[0]
      console.log(dashiId)
        location.href="<!--{:U('Bbqm/payZhifu','',false)}-->?did="+dashiId;
    })
  
  </script>
</body>

</html>